<template>
  <div ref="echart" class="echart"></div>
</template>

<script>
export default {
  data() {
    return {
      echart: null
    }
  },
  mounted() {
    this.initDta()
  },
  methods: {
    initDta() {
      this.echart = this.$echarts.init(this.$refs.echart)
      const option = {
        title: {
          text: '单位 : 艘次',
          top: '8',
          right: ' 50%',
          show: true,
          textStyle: {
            color: '#FFF',
            fontSize: 20,
          },
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#6a7985',
            },
          },
          formatter: function (params) {
            var relVal = params[0].name
            for (var i = 0, l = params.length; i < l; i++) {
              relVal +=
                  '<br/>' +
                  params[i].marker +
                  params[i].seriesName +
                  ' : ' +
                  params[i].value +
                  '次'
            }
            return relVal
          },
        },
        legend: {
          top: '3%',
          right: '3%',
          icon: 'rect',
          textStyle: {
            color: '#FFF',
            fontSize: 18,
          },
          itemStyle: {
            borderType: 'solid',
          },
        },
        grid: {
          top: '22%',
          left: '5%',
          right: '3%',
          bottom: '3%',
          containLabel: true,
        },
        xAxis: [
          {
            type: 'category',
            boundaryGap: false,
            axisLabel: {
              color: '#fff',
              fontSize: 14,
              padding: 4,
            },
            data: ['1月', '2月', '3月', '4月'],
          },
        ],
        yAxis: {
          axisLabel: {
            show: true,
            color: '#fff',
            fontSize: 14,
            padding: 4,
          },
          splitLine: {
            lineStyle: {
              color: '#2a3961',
            },
          },
          axisTick: {
            show: false,
          },
        },
        series: [
          {
            name: '进',
            type: 'line',
            smooth: true,
            lineStyle: {
              width: 2,
              color: '#F5BC28',
            },
            itemStyle: {
              color: '#F5BC28',
            },
            showSymbol: false,
            areaStyle: {
              opacity: 0.5,
              color: this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: '#F5BC28',
                },
                {
                  offset: 1,
                  color: 'rgba(255,207,78,0)',
                },
              ]),
            },
            emphasis: {
              focus: 'series',
            },
            data: [20, 30, 15,20],
          },
          {
            name: '出',
            type: 'line',
            smooth: true,
            lineStyle: {
              width: 2,
              color: '#39FFDC',
            },
            itemStyle: {
              color: '#39FFDC',
            },
            showSymbol: false,
            areaStyle: {
              opacity: 0.5,
              color: this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: '#39FFDC',
                },
                {
                  offset: 1,
                  color: 'rgba(255,207,78,0)',
                },
              ]),
            },
            emphasis: {
              focus: 'series',
            },
            data: [30, 25, 45,10],
          },
        ],
      }
      this.echart.setOption(option)
    }
  }
}
</script>

<style scoped lang="less">
.echart {
  width: 100%;
  height: 100%;
}
</style>
